<template>
  <div class="pgmain">
    <!-- 上肢功能评估量表 UEFI  -->
    <div class="pgquestionbox beautifulScroll">
      <a-form ref="formRef" :rules="formRules" :model="formModel">
        <div class="pgquestion" v-for="(item, index) in pgdata" :key="item.id">
          <a-form-item :field="String(item.id)">
            <div class="pgname">{{ item.name }}</div>
            <div class="pgchoicebox">
              <a-radio-group
                :disabled="Evaluationshow"
                v-if="item.type == undefined"
                v-model="formModel[item.id]"
                :options="item.des"
              ></a-radio-group>
              <div v-else>
                <a-input
                  :disabled="Evaluationshow"
                  :style="{ width: '320px' }"
                  v-model="formModel[item.id]"
                  placeholder="备注"
                  allow-clear
                />
              </div>
            </div>
          </a-form-item>
        </div>
      </a-form>
    </div>
    <div class="pgckbox beautifulScroll">
      <img
        ref="nativeImg"
        src="@/assets/images/jisui.png"
        style="display: none"
      />
      <!-- <img src="@/assets/images/guanjieyan.png" alt="" class="pgckboximg" /> -->
      <a-image class="pgckzz" :src="nativeImg?.src" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { saveEvaluation } from '@/api/pingu';
  const nativeImg = ref<HTMLImageElement | null>(null);
  const props = defineProps({
    // 定义patientTreatmentId属性，指定类型为字符串
    patientTreatmentId: {
      type: String,
      required: true, // 如果父组件必须传递该属性，可设为true
      // 可选：设置默认值（当required为false时生效）
      // default: 'default-id'
    },
    Evaluationshow: {
      type: Boolean,
    },
    Evaluationdata: {
      type: Object,
    },
  });
  const Evaluationshow = ref(props.Evaluationshow);
  const patientTreatmentId = ref(props.patientTreatmentId);
  const Evaluationdata = ref(props.Evaluationdata);
  const pgdata = [
    {
      id: 1,
      name: '1、肘屈肌群/肱二头肌',
      des: [
        { label: '0：完全麻痹', value: '0' },
        { label: '1：触及或可见肌收缩', value: '1' },
        { label: '2：不抗重力主动运动', value: '2' },
        { label: '3：可抗重力主动运动', value: '3' },
        { label: '4：对抗部分阻力主动运动', value: '4' },
        { label: '5：对抗部分阻力主动运动', value: '5' },
        { label: 'NT：无法检查', value: '6' },
      ],
    },
    {
      id: 2,
      name: '2、腕伸肌群/桡侧伸腕肌',
      des: [
        { label: '0：完全麻痹', value: '0' },
        { label: '1：触及或可见肌收缩', value: '1' },
        { label: '2：不抗重力主动运动', value: '2' },
        { label: '3：可抗重力主动运动', value: '3' },
        { label: '4：对抗部分阻力主动运动', value: '4' },
        { label: '5：对抗部分阻力主动运动', value: '5' },
        { label: 'NT：无法检查', value: '6' },
      ],
    },
    {
      id: 3,
      name: '3、肘伸肌群/肱三头肌',
      des: [
        { label: '0：完全麻痹', value: '0' },
        { label: '1：触及或可见肌收缩', value: '1' },
        { label: '2：不抗重力主动运动', value: '2' },
        { label: '3：可抗重力主动运动', value: '3' },
        { label: '4：对抗部分阻力主动运动', value: '4' },
        { label: '5：对抗部分阻力主动运动', value: '5' },
        { label: 'NT：无法检查', value: '6' },
      ],
    },
    {
      id: 4,
      name: '4、指屈肌群/中指末节屈肌',
      des: [
        { label: '0：完全麻痹', value: '0' },
        { label: '1：触及或可见肌收缩', value: '1' },
        { label: '2：不抗重力主动运动', value: '2' },
        { label: '3：可抗重力主动运动', value: '3' },
        { label: '4：对抗部分阻力主动运动', value: '4' },
        { label: '5：对抗部分阻力主动运动', value: '5' },
        { label: 'NT：无法检查', value: '6' },
      ],
    },
    {
      id: 5,
      name: '5、指外展肌群/小指外展肌',
      des: [
        { label: '0：完全麻痹', value: '0' },
        { label: '1：触及或可见肌收缩', value: '1' },
        { label: '2：不抗重力主动运动', value: '2' },
        { label: '3：可抗重力主动运动', value: '3' },
        { label: '4：对抗部分阻力主动运动', value: '4' },
        { label: '5：对抗部分阻力主动运动', value: '5' },
        { label: 'NT：无法检查', value: '6' },
      ],
    },
    {
      id: 6,
      name: '6、髋屈肌群/髂腰肌',
      des: [
        { label: '0：完全麻痹', value: '0' },
        { label: '1：触及或可见肌收缩', value: '1' },
        { label: '2：不抗重力主动运动', value: '2' },
        { label: '3：可抗重力主动运动', value: '3' },
        { label: '4：对抗部分阻力主动运动', value: '4' },
        { label: '5：对抗部分阻力主动运动', value: '5' },
        { label: 'NT：无法检查', value: '6' },
      ],
    },
    {
      id: 7,
      name: '7、膝伸肌群/股四头肌',
      des: [
        { label: '0：完全麻痹', value: '0' },
        { label: '1：触及或可见肌收缩', value: '1' },
        { label: '2：不抗重力主动运动', value: '2' },
        { label: '3：可抗重力主动运动', value: '3' },
        { label: '4：对抗部分阻力主动运动', value: '4' },
        { label: '5：对抗部分阻力主动运动', value: '5' },
        { label: 'NT：无法检查', value: '6' },
      ],
    },

    {
      id: 8,
      name: '8、踝背伸肌群/胫前肌',
      des: [
        { label: '0：完全麻痹', value: '0' },
        { label: '1：触及或可见肌收缩', value: '1' },
        { label: '2：不抗重力主动运动', value: '2' },
        { label: '3：可抗重力主动运动', value: '3' },
        { label: '4：对抗部分阻力主动运动', value: '4' },
        { label: '5：对抗部分阻力主动运动', value: '5' },
        { label: 'NT：无法检查', value: '6' },
      ],
    },
    {
      id: 9,
      name: '9、 趾长伸肌群/拇长伸肌',
      des: [
        { label: '0：完全麻痹', value: '0' },
        { label: '1：触及或可见肌收缩', value: '1' },
        { label: '2：不抗重力主动运动', value: '2' },
        { label: '3：可抗重力主动运动', value: '3' },
        { label: '4：对抗部分阻力主动运动', value: '4' },
        { label: '5：对抗部分阻力主动运动', value: '5' },
        { label: 'NT：无法检查', value: '6' },
      ],
    },
    {
      id: 10,
      name: '10、踝跖屈肌群/腓肠肌',
      des: [
        { label: '0：完全麻痹', value: '0' },
        { label: '1：触及或可见肌收缩', value: '1' },
        { label: '2：不抗重力主动运动', value: '2' },
        { label: '3：可抗重力主动运动', value: '3' },
        { label: '4：对抗部分阻力主动运动', value: '4' },
        { label: '5：对抗部分阻力主动运动', value: '5' },
        { label: 'NT：无法检查', value: '6' },
      ],
    },
    {
      id: 11,
      name: '11、C2枕骨粗隆外侧至少1 cm（或耳后3 cm）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 12,
      name: '12、C3锁骨上窝（锁骨后方，锁骨中线）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 13,
      name: '13、C4肩峰锁骨关节顶部',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 14,
      name: '14、C5肘窝外侧（肱二头肌腱外侧）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 15,
      name: '15、 C6拇指近节指骨背侧',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 16,
      name: '16、C7中指近节指骨背侧',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 17,
      name: '17、C8小指近节指骨背侧 ',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 18,
      name: '18、T1肘窝内侧（肱骨内上髁近端）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 19,
      name: '19、T2腋窝顶部',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 20,
      name: '20、T3第3肋间（锁骨中线）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 21,
      name: '21、T4第4肋间（乳头水平，锁骨中线）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 22,
      name: '22、T5第5肋间（T4与T6中点）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 23,
      name: '23、T6第6肋间（剑突水平）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 24,
      name: '24、T7第7肋间（T6与T8中点）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 25,
      name: '25、T8第8肋间（T6与T10中点）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 26,
      name: '26、T9第9肋间（T8与T10中点）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 27,
      name: '27、T10第10肋间（脐水平）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 28,
      name: '28、T11第11肋间（T10与T12中点）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 29,
      name: '29、T12腹股沟韧带中点',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 30,
      name: '30、L1T12与L2中点（大腿前上部）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 31,
      name: '31、L2大腿前内侧中点（腹股沟韧带中点至股骨内髁连线中点）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 32,
      name: '32、L3股骨内髁：',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 33,
      name: '33、L4内踝',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 34,
      name: '34、L5足背第3跖趾关节',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 35,
      name: '35、S1足跟外侧（跟骨外侧）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 36,
      name: '36、S2腘窝中点',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 37,
      name: '37、S3坐骨结节或臀下皱襞',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 38,
      name: '38、S4–5肛周区（距肛缘<1 cm，作为同一水平）',
      des: [
        { label: '0无', value: '0' },
        { label: '1减弱', value: '1' },
        { label: '2正常', value: '2' },
        { label: 'NT无法检查', value: '3' },
      ],
    },
    {
      id: 39,
      name: '39、肛周水平-自主肛门括约肌收缩',
      des: [
        { label: '有', value: '0' },
        { label: '无', value: '1' },
      ],
    },
    {
      id: 40,
      name: '40、肛周水平-肛门感觉',
      des: [
        { label: '有', value: '0' },
        { label: '无', value: '1' },
      ],
    },
    {
      id: 41,
      name: '41、神经水平-关键肌-左',
      des: [{ label: '有', value: '0' }],
      type: 'tk',
    },
    {
      id: 42,
      name: '42、神经水平-关键肌-右',
      des: [{ label: '有', value: '0' }],
      type: 'tk',
    },
    {
      id: 43,
      name: '43、神经水平-关键感觉点-左',
      des: [{ label: '有', value: '0' }],
      type: 'tk',
    },
    {
      id: 44,
      name: '44、神经水平-关键感觉点-右',
      des: [{ label: '有', value: '0' }],
      type: 'tk',
    },
    {
      id: 45,
      name: '45、ASIA损伤程度分级',
      des: [
        {
          label: 'A.完全性损伤,骶段（S4～5）无任何感觉或运动功能保留',
          value: '0',
        },
        {
          label: 'B.不完全损伤,损伤平面以下包括骶段有感觉但无运动功能',
          value: '1',
        },
        {
          label:
            'C.不完全损伤,损伤平面以下存在运动功能，大部分关键肌肌力在3级以下',
          value: '2',
        },
        {
          label:
            'D.不完全损伤,损伤平面以下存在运动功能，大部分关键肌肌力在3级或以上',
          value: '3',
        },
        {
          label: 'E.正常,感觉和运动功能正常',
          value: '4',
        },
      ],
    },
  ];
  // 评估名称
  const title = ref('脊髓损伤积分评定表');
  const formRef = ref();
  const formModel = ref<Record<string, string>>({});
  const formRules: Record<string, any[]> = {};

  pgdata.forEach((item) => {
    formModel.value[item.id] = '';
    formRules[item.id] = [
      { required: true, message: '必填', trigger: 'change' },
    ];
  });
  if (Evaluationdata.value && Object.keys(Evaluationdata.value).length > 0) {
    // 只有当Evaluationdata.value存在且不是空对象时才赋值
    formModel.value = { ...Evaluationdata.value };
    console.log('查看模式回显的数据处理完成', formModel.value);
  }
  const scoresSum = ref(0);
  // 计算总和的方法
  const calculateSum = () => {
    let sum = 0;
    Object.values(formModel.value).forEach((item) => {
      // 只处理非空字符串并转换为数字
      if (item !== '') {
        sum += Number(item);
      }
    });
    scoresSum.value = sum;
  };

  //提交评估表
  const submitPg = () => {
    // 返回Promise以便父组件捕获状态
    return new Promise((resolve, reject) => {
      formRef.value.validate((errors: any) => {
        if (!errors) {
          // 初始计算一次
          // calculateSum();

          saveEvaluation({
            patientTreatmentId: patientTreatmentId.value,
            evaluation: JSON.stringify(formModel.value),
            title: title.value,
            score: '不参与评分',
          })
            .then((res: any) => {
              if (res.code == 200) {
                console.log('提交评估成功', res.data);
                resolve(res.data); // 成功时返回数据
              } else {
                // 接口返回非200状态视为失败
                reject(new Error(`提交失败: ${res.msg || '未知错误'}`));
              }
            })
            .catch((error: any) => {
              // 捕获接口调用异常
              console.error('提交评估失败', error);
              reject(new Error(`网络错误: ${error.message}`));
            });
        } else {
          // 表单验证失败
          reject(new Error('表单验证失败，请检查输入'));
        }
      });
    });
  };
  defineExpose({
    submitPg,
  });
</script>

<style scoped>
  .pgmain {
    height: 100%;
    display: flex;
  }
  .pgckbox {
    height: 600px;
    width: 600px;
    overflow: hidden;
    overflow-y: auto;
  }

  :deep(.pgckzz .arco-image-img) {
    width: 590px;
    height: 7720px;
    cursor: pointer;
  }
  .pgquestionbox {
    width: 600px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    height: 600px;
  }
  .pgckboximg {
    width: 590px;
    height: 1301px;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
  }
  .pgquestion {
    display: flex;
  }
  .pgname {
    font-size: 18px;
  }
  .pgchoicebox {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    margin-top: 10px;
  }
  :deep .pgchoicebox .arco-radio-label {
    font-size: 18px !important;
  }

  :deep .pgquestionbox .arco-form-item-content-flex {
    flex-direction: column !important;
    align-items: normal !important;
    justify-content: normal !important;
  }

  :deep .pgquestionbox .arco-col-5 {
    flex: 0 !important;
    width: 0 !important;
  }
  :deep .pgquestionbox .arco-radio-group {
    display: flex;
    flex-direction: column;
  }
  :deep .arco-radio {
    margin: 6px 0;
  }
</style>
